<template>
  <div class="base-aside">
    <!-- logo -->
    <div class="logo">
      <div style="margin-left: 25px">
        <span style="color: #2cd3b5; font-size: 20px; font-weight: bold"
          >在线医疗</span
        ><span>管理系统</span>
        <p class="custom-text">Online healthcare</p>
      </div>
    </div>

    <el-menu
      class="el-menu-vertical-demo"
      background-color="#fff"
      text-color="#666"
      active-text-color="#2cd3b5"
      router
    >
      <el-submenu
        v-for="(menu, index) in menuData"
        :key="index"
        :index="index.toString()"
      >
        <template slot="title">
          <span>{{ menu.title }}</span>
        </template>

        <el-menu-item
          v-for="(item, i) in menu.children"
          :key="index + '-' + i"
          :index="item.url"
          @click="clickMenu(item)"
        >
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getMenu, filterMenu } from "@/api/menu";
import { fnAddDynamicMenuRoutes } from "@/router/getAsyncRouter";
export default {
  name: "base-aside",
  data() {
    return {
      menuData: [],
      isCollapse: false,
    };
  },
  created() {
    this.initMenu();
  },
  methods: {
    /**
     * 初始化菜单数据
     */
    initMenu() {
      getMenu().then((res) => {
        this.menuData = res.data;
      });
    },

    // 点击菜单
    clickMenu(value) {
      // 通过vuex将数据存储在store中
      this.$store.commit("mutationSelectTags", value);
    },
  },
};
</script>

<style lang="less" scoped>
.custom-text {
  font-family: "Times New Roman";
  font-size: 15px;
  font-style: italic;
  letter-spacing: 1px;
}
.logo {
  padding-top: 20px;
  background: #fff;
  height: 60px;
  width: 200px;
}
.base-aside {
  width: 100px;
  height: calc(100% - 80px);

  /deep/.el-menu-vertical-demo {
    height: calc(100% - 60px);
    border: none;

    &:not(.el-menu--collapse) {
      width: 200px;
      height: calc(100% - 60px);
    }

    li {
      width: 100%;
    }

    .menu-title {
      color: #666 !important;
    }

    .el-submenu__title:hover {
      //父级背景 字体颜色
      background: #f6fffe !important;
      color: #2cd3b5 !important;
    }

    .el-menu-item.is-active {
      background: #f6fffe !important;
    }

    .el-menu-item.is-active::before {
      position: absolute;
      left: 0;
      width: 3px;
      height: 100%;
      //左边导航栏点击数条颜色
      background: #2cd3b5 !important;
      content: "";
      display: inline-block;
    }

    .el-menu-item:hover {
      //子级鼠标放入变化背景 字体颜色
      background: #f6fffe !important;
      color: #2cd3b5 !important;
    }

    //当侧边栏收起时的样式
    .el-menu--popup-right-start {
      .el-menu-item:hover {
        width: 100%;
      }

      .is-active {
        width: 100%;
        //不知道
        background: #eaeefa !important;
      }
    }
  }
  .menu-title {
    //字体颜色
    color: #666;
  }
  .el-menu-item.is-active {
    background: #eaeefa !important;
  }
  /deep/.el-menu-item.is-active::before {
    position: absolute;
    left: 0;
    width: 3px;
    height: 100%;
    //不知道
    background: #2cd3b5 !important;
    content: "";
    display: inline-block;
  }
  .el-menu-item:hover {
    background: #eaeefa !important;
    color: #2cd3b5 !important;
  }
  /deep/.el-submenu__title:hover {
    background: #eaeefa !important;
  }
  //当侧边栏收起时的样式
  .el-menu--popup-right-start .el-menu-item:hover {
    width: 100%;
  }
  .el-menu--popup-right-start .is-active {
    width: 100%;
    background: #eaeefa !important;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
    overflow: auto;
  }
}
</style>
